﻿/* -- Copyright © Microsoft Corporation. All rights reserved. */

/*-----------------------------------------------------------------------------  
    checkbox and radio button labels
-----------------------------------------------------------------------------*/

.checkboxLabel, .radioLabel
{
    font-family:"Segoe UI";
    color: rgb(33, 33, 33);
}

/* put the checkbox/radio button and its label into flexbox, so that the second line of the label 
   left-align with the first line and doesn't go underneath the checkbox/radio button. */
.wrapContainer
{
    display:-ms-flexbox; 
    -ms-flex-align: baseline;
}

/* the actual label text that wraps */
.wrapText
{
    -ms-flex: 1 1 auto; 
    word-wrap: break-word;
    display: inline-block;
}

/*-----------------------------------------------------------------------------  
    Form section
-----------------------------------------------------------------------------*/

.formSection
{
    margin: 0px;
    padding: 0px;
    border: 0px;
}


/*-----------------------------------------------------------------------------  
    Form section heading
-----------------------------------------------------------------------------*/

.formSectionHeading 
{
	font-family:"Segoe UI Light";
	line-height:32px;
	font-size:20pt;
    margin:38px 0px 29px 0px;
}
    

/*-----------------------------------------------------------------------------  
    Tow column form container
-----------------------------------------------------------------------------*/
.twoColumnFormContainer
{
    display: -ms-grid;
    -ms-grid-columns: 50% 50%;
    min-width: 380px;
    max-width: 450px;
}


/*-----------------------------------------------------------------------------  
    Control groups (radio, checkbox button group)
-----------------------------------------------------------------------------*/
.controlGroup
{
    margin: 0px 0px 20px 0px;
    padding: 0px;
    border: 0px;
}


.controlGroupName
{
    font:normal normal normal 11pt/15pt "Segoe UI Semilight";
    margin:0px 0px 10px 0px;
    padding:0px;
    border: 0px;
    position:relative;
    vertical-align:top;
    display:block;
}

/*-----------------------------------------------------------------------------  
    Horizontal label layout
-----------------------------------------------------------------------------*/

.horizontalLabelLayout
{
    margin-right:20px;
}

/*-----------------------------------------------------------------------------  
    push button group  
-----------------------------------------------------------------------------*/

.buttonGroup 
{
    margin: 30px 0px 0px 0px;
    text-align: right;
}


/* the margin is to separate a button with any other text input or button before it. */
.horizontalButtonLayout
{
    margin: 0px 0px 0px 20px;
}


/*-----------------------------------------------------------------------------  
    Vertical spacing to separate stacking form controls
-----------------------------------------------------------------------------*/
.verticalStacking button,
.verticalStacking input[type=button],
.verticalStacking input[type=submit],
.verticalStacking input[type=reset]
{
    margin-bottom: 12px;
}

.verticalStacking input[type="checkbox"]
{
    margin-bottom: 10px;
}

.verticalStacking input[type="radio"]
{
    margin-bottom: 10px;
}

.verticalStacking select,
.verticalStacking input[type=text], .verticalStacking input[type=password], .verticalStacking input[type=email], .verticalStacking input[type=number], .verticalStacking input[type=tel], .verticalStacking input[type=url], .verticalStacking input[type=search],
.verticalStacking textarea, .verticalStacking .win-textarea
{
    margin-bottom: 16px;
}

/*-----------------------------------------------------------------------------  
    Error and notification messages
-----------------------------------------------------------------------------*/
.formMessage
{
    margin-bottom: 13px;
    font-family: "Segoe UI Semilight";
}

.formMessage.error
{
    color: rgb(200, 83, 5);
}

/* detailed description under the name of each sub example */
.detail
{
    font-size: 9pt;
    margin-top: 6px;
}

iframe
{
    border: 0px;
}

.twoColumnGridContainer-ControlList
{
    display: -ms-grid;
    -ms-grid-columns: 300px auto;
}

/* save space when the screen has less width, e.g. in portrait orientation or snapped view */
@media screen and (max-width: 800px)
{
    .twoColumnGridContainer-ControlList
    {
        -ms-grid-columns: 200px auto;
    }
}
    
.twoColumnGridContainer-ControlList > div
{
    margin: 10px 0px 20px 30px;
}

.noWrap
{
    min-width: 400px;   /* avoid wrapping into multiple lines when the width is small, make it horizontally scrollable instead. */
}

button.leftMargin
{
    margin-left: 20px;
}

.stylingSampleAlign
{
    padding-left: 50px;
}